<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>竞拍页面</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css">
    <link href="../css/style2.css" rel="stylesheet" type="text/css">
    <link rel="Shortcut Icon" href="../images/icon.png" type="image/png"/>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
    <script type="text/javascript" th:src="@{/js/sockjs.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/stomp.min.js}"></script>
    <script type='text/javascript'>
        //倒计时功能实现
        var currentTime = new Date();
        var num = Math.abs([[${bidTime}]] - currentTime);
        num = parseInt(num / 1000) + 1;

        function calc() {
            if (num > 0) {
                num--;
                xc_day = parseInt(num / 60 / 60 / 24);
                xc_h = parseInt(num / 60 / 60 - 24 * xc_day);
                xc_m = parseInt(num / 60 - xc_day * 24 * 60 - xc_h * 60);
                xc_s = parseInt(num - xc_m * 60 - xc_h * 60 * 60 - xc_day * 24 * 60 * 60);
                document.getElementById("day").innerHTML = xc_day;
                document.getElementById("hour").innerHTML = xc_h;
                document.getElementById("minute").innerHTML = xc_m;
                document.getElementById("second").innerHTML = xc_s;
            } else {
                alert("页面更新");
                location.href = 'index.jsp'
            }
            setTimeout('calc()', 1000);
        }

        //Ajex长轮询实现
        /*function getRtmMsg() {
            $.ajax({
                type: "POST",
                url: "updateBidJsp.action?productID=${api.productID}",
                success: function (msg) {
                    if (msg == "1") {
                        alert(msg + "有新的竞价");
                        location.href = 'enterBidJsp.action?productID=${api.productID}';
                    } else {
                    }
                    getRtmMsg();
                }
            });
        }*/

        //竞价判断
        function judgePrice() {
            var nowPrice = [[${pi.nowPrice}]];
            var upRange = [[${pi.upRange}]];
            var price = nowPrice + upRange;
            var bidPrice = document.getElementById('bidPrice').value;
            if (bidPrice < price) {
                alert("出价需大于等于" + price)
            } else {
                // location.href = 'addAuctionProduct_Bid.action?productID=' + '${productID}' + '&bidPrice=' + document.getElementById('bidPrice').value
                location.href = '/product/' + [[${pi.productId}]] + '/' + bidPrice;
            }
        }

        function add() {
            var upRange = [[${pi.upRange}]];
            var bidPrice = parseInt(document.getElementById('bidPrice').value);
            var price = upRange + bidPrice;
            document.getElementById('bidPrice').value = price;
        }

        function add2() {
            var upRange = [[${pi.upRange}]];
            var bidPrice = parseInt(document.getElementById('bidPrice').value);
            var price = 2 * upRange + bidPrice;
            document.getElementById('bidPrice').value = price;
        }

        function add3() {
            var upRange = [[${pi.upRange}]];
            var bidPrice = parseInt(document.getElementById('bidPrice').value);
            var price = 3 * upRange + bidPrice;
            document.getElementById('bidPrice').value = price;
        }

        window.onload = function () {
            calc();
            // getRtmMsg()
        }
    </script>
    <script type="text/javascript">
        var sock = new SockJS('/bidSocket');
        var stomp = Stomp.over(sock);
        console.log("begin");
        stomp.connect('guest', 'guest', function (frame) {
            console.log('Connected');
            stomp.subscribe("/topic/bidResponse", handle);
        });

        function handle(incoming) {
            var productBidInfo = JSON.parse(incoming.body);
            console.log('Received: ', productBidInfo);
            alert("有新的竞价");
            var source = $("#bidInfo-template").html();
            var template = Handlebars.compile(source);
            var bidHtml = template(productBidInfo);
            document.getElementById("first").id="";
            document.getElementById("lead").innerHTML="出局";
            $('#list').prepend(bidHtml);
        }

    </script>
    <script id="bidInfo-template" type="text/x-handlebars-template">
        <tr id="first">
            <td>{{bidTime}}
            </td>
            <td>{{bidderId}}
            </td>
            <td>{{bidPrice}}
            </td>
            <td>
                <text id="lead">领先</text>
            </td>
        </tr>
    </script>
</head>
<body>
<div class="headBarContainer">
    <div class="itemsContainer">
        <nav>
            <ul>
                <li class="headItem"><a href="index.jsp">首页</a></li>
                <li class="headItem" id="clicked"><a href="/index/products">分类</a></li>
                <li class="headItem"><a href="enterMyJsp.action">我的</a>
            </ul>
        </nav>
    </div>
    <div th:if="${session.userId}!=null" class="logButton" id="logIn">
        <a href="/user/exit">
            <div>退出</div>
        </a>
    </div>
    <div th:if="${session.userId}==null" class="logButton" id="logIn">
        <a href="/index/login">
            <div>登录</div>
        </a>
    </div>
    <div th:if="${session.userId}==null" class="logButton" id="signIn">
        <a href="/index/login">
            <div>注册</div>
        </a>
    </div>

</div>
<div class="icon">
    <img src="../images/icon.png">
</div>
<!--出价区域-->
<div class="mainArea" th:if="${pi.auctionType}eq'已拍卖'">
    <div id="title">
        <text th:text="${pi.productName}">
        </text>
    </div>
    <div class="information">
        <div class="picContainer">
            <img th:src="${pi.productPhotos}">
        </div>
        <div class="priceArea">
            <table id="top">
                <tr>
                    <td>最终价</td>
                    <td>
                        <text id="price" class="number" th:text="${pi.nowPrice}">
                        </text>
                        元
                    </td>
                    <td>拍卖人信用：
                        <text id="person" th:text="${uai.creditValue}">
                        </text>
                    </td>
                </tr>
            </table>
        </div>
        <div class="peopleCount">
            <div>
                <text class="number">48</text>
                人报名&nbsp&nbsp&nbsp&nbsp
                <text class="number">236</text>
                人围观&nbsp&nbsp&nbsp&nbsp
            </div>
        </div>
        <div class="moreInformation">
            <table>
                <tr>
                    <td class="first">起拍价</td>
                    <td>
                        <text id="startPrice" th:text="'￥'+${pi.floorPrice}">
                        </text>
                    </td>
                    <td class="first">商品种类</td>
                    <td>
                        <text id="kind" th:text="${pi.productType}">
                        </text>
                    </td>
                </tr>
                <tr>
                    <td class="first">加价幅度</td>
                    <td>
                        <text id="step" th:text="'￥'+${pi.upRange}">
                        </text>
                    </td>
                    <td class="first">预设成交价</td>
                    <td>
                        <text id="presetPrice" th:text="'￥'+${pi.transPrice}">
                        </text>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">竞价规则： 至少一人报名且出价不低于起拍价，方可成交</td>
                </tr>
                <tr>
                    <td colspan="4">尾款支付方式： 通过订单支付</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<!--历史价格-->
<!--<div class="historyPrice" th:if="${pi.auctionType}eq'已拍卖'">
    <div id="title">
        <text>竞价</text>
        记录
    </div>
    <div class="tableContainer">
        <table>
            <tr>
                <th>出价时间</th>
                <th>竞价者</th>
                <th>价格</th>
                <th>状态</th>
            </tr>
            <s:iterator value="apbList" id="apb" status="st">
                <s:if test="#st.index==0">
                    <tr id="first">
                        <td th:text="${}">
                            <s:property value="#apb.bidTime"/>
                        </td>
                        <td>
                            <s:property value="#apb.bidderID"/>
                        </td>
                        <td>
                            <s:property value="#apb.bidPrice"/>
                        </td>
                        <td>
                            <text>领先</text>
                        </td>
                    </tr>
                </s:if>
                <s:else>
                    <tr>
                        <td>
                            <s:property value="#apb.bidTime"/>
                        </td>
                        <td>
                            <s:property value="#apb.bidderID"/>
                        </td>
                        <td>
                            <s:property value="#apb.bidPrice"/>
                        </td>
                        <td>
                            <text>出局</text>
                        </td>
                    </tr>
                </s:else>
            </s:iterator>

        </table>
    </div>
</div>-->
<div class="mainArea" th:unless="${pi.auctionType}eq'已拍卖'">
    <div id="title">
        <text th:text="${pi.productName}">
        </text>
    </div>
    <div class="information">
        <div class="picContainer">
            <img th:src="${pi.productPhotos}">
        </div>
        <div class="priceArea">
            <table id="top" th:if="${pi.auctionType}eq'正在拍卖'">
                <tr class="firstLine">
                    <td>距
                        <text id="isStart">结束</text>
                    </td>
                    <td colspan="2">
                        <text id="day" class="number">1</text>
                        天
                        <text
                                id="hour" class="number">01
                        </text>
                        时
                        <text id="minute"
                              class="number">25
                        </text>
                        分
                        <text id="second" class="number">36</text>
                        秒
                    </td>
                </tr>
                <tr>
                    <td>当前价</td>
                    <td>
                        <text id="price" class="number" th:text="${pi.nowPrice}">
                        </text>
                        元
                    </td>
                    <td>拍卖人信用：
                        <text id="person" th:text="${uai.creditValue}">
                        </text>
                    </td>
                </tr>
                <!--可出价-->
                <tr class="available">
                    <td>出&nbsp&nbsp&nbsp价</td>
                    <td><input type="number" th:min="${pi.nowPrice}" th:step="${pi.upRange}" name="bidPrice"
                               id="bidPrice" th:value="${pi.nowPrice}"></td>
                </tr>
                <tr class="available">
                    <td></td>
                    <td>
                        <button class="stepButton" th:onclick="add()" th:text="'+'+${pi.upRange}">
                        </button>
                        <button class="stepButton" th:onclick="add2()" th:text="'+'+${2*pi.upRange}">
                        </button>
                        <button class="stepButton" th:onclick="add3()" th:text="'+'+${3*pi.upRange}">
                        </button>
                    </td>
                </tr>
                <tr class="available" th:if="${userType}eq'2'">
                    <td></td>
                    <td>
                        <button class="submitButton" onclick="judgePrice()">出价</button>
                    </td>
                </tr>

            </table>
            <table id="top" th:unless="${pi.auctionType}eq'正在拍卖'">
                <!--未开始-->
                <tr class="firstLine">
                    <td>距开始</td>
                    <td colspan="2">
                        <text id="day" class="number">1</text>
                        天
                        <text id="hour" class="number">01</text>
                        时
                        <text id="minute" class="number">25</text>
                        分
                        <text id="second" class="number">36</text>
                        秒
                    </td>
                </tr>
                <tr class="unStart">
                    <td>底&nbsp&nbsp&nbsp价</td>
                    <td>
                        <text id="price" class="number" th:text="${pi.nowPrice}">
                        </text>
                        元
                    </td>
                    <td></td>
                </tr>
                <!--不可出价-->
                <tr class="unavailable">
                    <td>出&nbsp&nbsp&nbsp价</td>
                    <td><input type="number" min="150000" step="200" disabled></td>
                </tr>
                <tr class="unavailable">
                    <td></td>
                    <td>
                        <button class="stepButton" disabled>+
                            <s:property value="api.upRange"/>
                        </button>
                        <button class="stepButton" disabled>+
                            <s:property value="2*api.upRange"/>
                        </button>
                        <button class="stepButton" disabled>+
                            <s:property value="3*api.upRange"/>
                        </button>
                    </td>
                </tr>
                <tr class="available">
                    <td></td>
                    <td>
                        <button class="submitButton" disabled>报名参与</button>
                    </td>
                </tr>
            </table>
        </div>
        <div class="peopleCount">
            <div>
                <text class="number">48</text>
                人报名&nbsp&nbsp&nbsp&nbsp
                <text class="number">236</text>
                人围观&nbsp&nbsp&nbsp&nbsp
            </div>
        </div>
        <div class="moreInformation">
            <table>
                <tr>
                    <td class="first">起拍价</td>
                    <td>
                        <text id="startPrice" th:text="'￥'+${pi.floorPrice}">
                        </text>
                    </td>
                    <td class="first">商品种类</td>
                    <td>
                        <text id="kind" th:text="${pi.productType}">
                        </text>
                    </td>
                </tr>
                <tr>
                    <td class="first">加价幅度</td>
                    <td>
                        <text id="step" th:text="'￥'+${pi.upRange}">
                        </text>
                    </td>
                    <td class="first">预设成交价</td>
                    <td>
                        <text id="presetPrice" th:text="'￥'+${pi.transPrice}">
                        </text>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">竞价规则： 至少一人报名且出价不低于起拍价，方可成交</td>
                </tr>
                <tr>
                    <td colspan="4">尾款支付方式： 通过订单支付</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<!--历史价格-->
<div class="historyPrice">
    <div id="title">
        <text>竞价</text>
        记录
    </div>
    <div class="tableContainer">
        <table>
            <thead>
            <tr>
                <th>出价时间</th>
                <th>竞价者</th>
                <th>价格</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody id="list">
            <tr th:each="pbi , status: ${pbiList}" th:id="${status.index==0}?first">
                <td th:text="${#dates.format(pbi.bidTime,'MM-dd HH:mm:ss')}">
                </td>
                <td th:text="${pbi.bidderId}">
                </td>
                <td th:text="${pbi.bidPrice}">
                </td>
                <td>
                    <text id="lead" th:if="${status.index==0}">领先</text>
                    <text th:unless="${status.index==0}">出局</text>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>